<template>
  <div class="position_type_body">
    <div class="select_total clearfix" v-show="!concealChecked">
      <span class="label fl">已选择</span>
      <div class="badge_wrapper">
        <a class="badge" :class="{'notHaveFavoritesPermission': !haveFavoritesPermission(item)}" v-for="item in selectList" :key="item.name" @click="removeSelect(item)">{{ item.name }}</a>
      </div>
    </div>
    <div class="tab_wrapper">
      <a class="tab_item border" v-for="(item, index) in activeStage" :key="index + item.name" :class="{ active: index === activeStage.length - 1 }" @click="changeStage(item)">{{ item.name }}</a>
    </div>
    <div class="option_wrapper border">
      <a-row>
        <a-col v-for="(item, index) in displayList" :key="item.id + item.name" :span="6" class="option">
          <a-checkbox v-show="item.children && !checkedDisable" v-model="item.checkAll" @change="checkAll($event, item, index)" :disabled='!haveFavoritesPermission(item) || item.disabled || checkedDisable'></a-checkbox>
          <a class="option_inner" :title="item.name" :class="{ active: item.isCheck }" @click="rootSelect($event, item, index)" :disabled='disabledBtn(item)'>{{ item.name }}</a>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CascaderPanel',
  props: ['cascaderData', 'selectList', 'single', 'searchValueIsNull', 'checkedDisable', 'concealChecked', 'realTimeDataChannels', 'stopDisable', 'isType'],
  model: { prop: 'selectList', event: 'change' },
  // inject: ['haveFavoritesPermission'],
  data () {
    return {
      displayList: [],
      activeStage: [ { name: '全部', stage: 0 } ],
      parentId: '',
      parentName: '',
      jobTypeFather: '',
      jobTypeSon: '',
      noChecked: false
    }
  },
  watch: {
    cascaderData: {
      handler: function (newValue, oldValue) {
        const _this = this
        const setDisable = function (data) {
          data.forEach(ele => {
            _this.selectList.forEach(element => {
              if (ele.id && (ele.id === element.id)) {
                ele['disabled'] = true
              }
              if (ele.children && ele.children.length) {
                setDisable(ele.children)
              }
            })
          })
        }
        this.displayList = this.cascaderData
        this.activeStage = [
          { name: '全部', stage: 0 }
        ]
        if (this.single) return false
        if (this.displayList instanceof Array && !this.stopDisable) {
          setDisable(this.displayList)
        }
      },
      immediate: true
    },
    searchValueIsNull: function (ele) {
      if (ele) {
        this.activeStage = [
          { name: '全部', stage: 0 }
        ]
      }
    },
    realTimeDataChannels: {
      handler: function (newValue, oldValue) {
        if (newValue && newValue.length === 8) {
          this.noChecked = true
        } else {
          this.noChecked = false
        }
      },
      immediate: true
    }
  },
  methods: {
    haveFavoritesPermission (item) {
      if (item.permissionsOfOperator && !item.permissionsOfOperator.authManage && !item.permissionsOfOperator.authWrite) {
        return false
      }
      return true
    },
    rootSelect (e, selectedEle, index) {
      console.log(selectedEle)
      // if (!selectedEle.children) {
      //   if (this.noChecked) {
      //     this.$message.warning('最多只能选择8个渠道！')
      //     return false
      //   }
      // }
      if (this.realTimeDataChannels && this.realTimeDataChannels.length) {
        if (this.selectList.find(item => item.label === selectedEle.label)) {
          this.$message.warning('已选择！')
          return false
        }
      }
      // 如果第一级已经点击全选
      if (this.isType === 'favorate') {

      } else {
        if (selectedEle.checkAll) return // 只有收藏夹类型时， 不执行此代码
      }
      // 如果有子字段
      if (selectedEle.children) {
        this.activeStage.push({ name: selectedEle.name, stage: selectedEle.id, children: selectedEle.children })
        this.displayList = selectedEle.children
        this.parentId = selectedEle.id
        this.parentName = selectedEle.name
      } else {
        if (this.single && this.selectList.length === 1) { // 如果单选先清空
          this.removeSelect(this.selectList[0])
        }
        this.$set(this.displayList[index], 'isCheck', !this.displayList[index].isCheck)
        if (this.displayList[index].isCheck) {
          this.selectList.push({
            name: this.displayList[index].name,
            id: this.displayList[index].id,
            pid: this.displayList[index].pid,
            parentId: this.parentId,
            parentName: this.parentName,
            label: selectedEle.label
          })
        } else {
          this.selectList.splice(this.selectList.findIndex(item => item.id === selectedEle.id), 1)
        }
      }
      this.$emit('checkedTags', this.selectList)
    },
    // badge点击 删除
    removeSelect (ele) {
      if (!this.haveFavoritesPermission(ele)) return
      if (this.single) {
        this.displayList.forEach(ele => {
          ele['disabled'] = false
        })
      }
      this.removeCheck(this.cascaderData, ele.id)
      this.selectList.splice(this.selectList.findIndex(item => item.id === ele.id), 1)
      this.$emit('checkedTags', this.selectList)
    },
    changeStage (ele) {
      console.log(this.activeStage, ele)
      if (ele.name === this.activeStage[this.activeStage.length - 1].name) {
        return
      }
      if (ele.stage === 0) {
        this.displayList = this.cascaderData
        this.activeStage = [this.activeStage[0]]
      } else {
        const { stage } = ele
        const index = this.activeStage.findIndex(item => item.stage === stage)
        this.activeStage = this.activeStage.slice(0, index + 1)
        this.displayList = ele.children
      }
    },
    // 移除check
    removeCheck (list, id) {
      list.forEach((item) => {
        let rootData = list.find(item => item.id === id)
        if (rootData) {
          rootData.checkAll = false
          if (rootData.disabled) {
            rootData['disabled'] = false
          }
        }
        if (item.children && item.children.length) {
          this.removeCheck(item.children, id)
        } else {
          if (item.id === id) {
            item.isCheck = false
          }
        }
      })
    },
    checkAll (e, ele) {
      if (this.single) {
        if (e.target.checked) {
          this.selectList.push(ele)
          this.displayList.forEach(ele => {
            ele['disabled'] = true
          })
        }
        if (this.selectList.length > 1) {
          this.selectList.forEach((element, ind) => {
            if (!element.checkAll) {
              this.selectList.splice(ind, 1)
            }
          })
        }
      } else {
        if (e.target.checked) {
          this.selectList.push(ele)
        } else {
          this.selectList.splice(this.selectList.findIndex(item => item.id ? item.id === ele.id : item.label === ele.label), 1)
        }
      }
      this.$emit('checkedTags', this.selectList)
    },
    disabledBtn (item) {
      if (!item.children) {
        if (item.disabled || !this.haveFavoritesPermission(item)) {
          return true
        }
      }
      // return !this.haveFavoritesPermission(item) || (!item.children && item.disabled)
    },
    handleOk () {
      this.$emit('confirm', this.jobTypeFather, this.jobTypeSon, this.selectList)
      this.selectList = []
      this.activeStage = [
        { name: '全部', stage: 0 }
      ]
      this.jobTypeFather = ''
      this.jobTypeSon = ''
    },
    handleCancel () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/styles/var'
.position_type_body
  .select_total
    .label
      display inline-block
      vertical-align middle
      line-height 34px
    .badge_wrapper
      margin-left 60px
      padding 4px 0
      .badge
        display inline-block
        margin 0 4px 2px 0
        padding 0 8px
        line-height 26px
        background-color BGblue
        color #fff
        border-radius 13px
        &.notHaveFavoritesPermission
          cursor not-allowed
          background rgba(0, 0, 0, .25)
  .tab_wrapper
    .tab_item:first-child
      left 0
    .tab_item
      position relative
      top 1px
      left -1px
      z-index 10
      display inline-block
      padding 8px 15px
      background-color #fff
    .tab_item.active
      border-bottom-color #fff
  .option_wrapper
    padding 24px
    max-height: 560px
    overflow: auto
    .title
      height 22px
      line-height 22px
      font-weight bold
    .option
      height 30px
      padding 0 2px
      line-height 30px
      margin-bottom 4px
      color var(--blue-500)
      display inline-block
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      .option_inner.active
        background-color BGblue
        color #fff
      .option_inner
        display inline-block
        vertical-align top
        width 86%
        padding 0 4px
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
</style>
